<template>
  <div class="main">
    <div class="group">
      <h3>v-if指令&v-show指令</h3>
      <div class="content">
        <p v-if="isShowP">
          当 v-if
          元素被触发，元素及其所包含的指令/组件都会被销毁和重构。如果初始条件是假，那么其场景：需要重新触发dom树渲染的时候
        </p>
        <hr />
        <p v-show="isShowP">
          v-show 通过设置内联样式的 display css
          属性来工作，当元素可见时将使用初始值，当条件改变时，也会触发过度效果。
        </p>
        <button type="button" @click="() => {
          isShowP = !isShowP
        }
          ">
          控制显示和隐藏
        </button>
      </div>
    </div>

    <div class="group">
      <h3>v-if指令 & v-else指令 & v-else-if</h3>
      <div class="content">
        <p @click="shiNum = 2" v-if="shiNum === 1">独立寒秋，湘江北去，橘子洲头。</p>
        <p @click="shiNum = 1" v-else>看万山红遍，层林尽染；漫江碧透，百舸争流。</p>
        <p>鹰击长空，鱼翔浅底，万类霜天竞自由。怅寥廓，问苍茫大地，谁主沉浮？</p>

        <hr />
        <p v-if="shiNum == 1">床前明月光</p>
        <p @click="shiNum = 3" v-else-if="shiNum === 2">疑是地上霜，举头望明月</p>
        <p v-else>低头思故乡</p>
      </div>
    </div>

    <div class="group">
      <h3>v-for指令</h3>
      <div class="content">
        <ul>
          <li>遍历字符串 :</li>
          <li v-for="item in `abcda`" :key="item">{{ `item: ${item}` }}</li>
        </ul>
        <hr />
        <ul>
          <li>遍历数字 :</li>
          <li v-for="item in 10" :key="item">{{ `item: ${item}` }}</li>
        </ul>
        <hr />
        <ul>
          <li>遍历数组 :</li>
          <li v-for="(item, index) in ['周', '志', '超', '梦', '娇']" :key="item">
            {{ `item:${item} - index: ${index}` }}
          </li>
        </ul>
        <hr />
        <ul>
          <li>遍历对象 :</li>
          <li v-for="(value, key, index) in {
            a: '周',
            b: '志',
            c: '超',
            d: '梦',
            e: '娇'
          }" :key="value">
            {{ `value:${value} - key: ${key} - index: ${index}` }}
          </li>
        </ul>
        <hr />
        <ul>
          <li>遍历set对象 :</li>
          <li v-for="(item, index) in mySet" :key="index">
            {{ `item: ${item} - index: ${index}` }}
          </li>
        </ul>
        <hr />
        <ul>
          <li>遍历Map :</li>
          <li v-for="(item, index) in myMap" :key="index">
            {{ `item: ${item} - - index: ${index}` }}
          </li>
        </ul>
      </div>
    </div>

    <div class="group">
      <h3>v-model双向数据绑定</h3>
      <div class="content">
        <p>
          inputVal: {{ inputVal }}
          <span style="color: red">UI更新</span>
        </p>
      </div>
      <!-- <input type="text" v-model="inputVal" name="username">// 方法1 -->
      <!--  方法2：
      @input="(e) => {...}"：当输入框内容发生变化时，执行箭头函数：
       console.log((e.target as HTMLInputElement).value)：获取事件对象 e 的目标元素（即输入框）的值，并打印。
       inputVal = (e.target as HTMLInputElement).value：将输入框的新值赋给 inputVal 变量。
      -->
      <input type="text" :value="inputVal" @input="(e) => {
        console.log((e.target as HTMLInputElement).value)
        inputVal = (e.target as HTMLInputElement).value
      }
        " />
      <button type="button" @click="inputVal = '修改后的inputValue'">修改inputVal</button>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'diyDemo23'
}
</script>

<script setup lang="ts">
import { ref } from 'vue'

const isShowP = ref(true)
const shiNum = ref(1)
const inputVal = ref('default')

let mySet = new Set()
mySet.add('apple')
mySet.add('banana')
mySet.add('orange')
mySet.add('apple')
console.log(mySet)

let myMap = new Map()
myMap.set('apple', 2)
myMap.set('banana', 3)
myMap.set('orange', 5)
console.log(myMap)
</script>

<style lang="scss" scoped>
@import '@/assets/groupDemo.scss';
</style>
